<template>
	<view class="wrap">
		<view class="innerItem">
			<view class="mineItem">
				<view class="mineTit">头像</view>
				<view class="hasFlex posRel">
					<button class="imgBtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">选择头像</button>
					<image class="samePar" :src="mainImg == '' ? defHead : getCloudFilePath(mainImg)"></image>
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
			<view class="mineItem">
				<view class="mineTit">真实姓名</view>
				<view class="hasFlex">
					<view class="currVersion">{{realName}}</view>
				</view>
			</view>
			<view class="mineItem">
				<view class="mineTit">性别</view>
				<view class="hasFlex">
					<view class="currVersion">{{sexTxt}}</view>
				</view>
			</view>
			<view class="mineItem" v-if="birthday != ''">
				<view class="mineTit">出生日期</view>
				<view class="hasFlex">
					<view class="currVersion">{{birthday}}</view>
				</view>
			</view>
			<view class="mineItem">
				<view class="mineTit">版本号</view>
				<view class="hasFlex">
					<view class="currVersion">{{currVersion}}</view>
				</view>
			</view>
		</view> 
		<button class="comBtn" @tap="logoOut">退出登录</button>
		<common-alert :showAlertFlag="showAlertFlag" :maskClosable="maskClosable" @closeAlertComponent="closeAlertComponent">
			<view class="alertContent">是否确认退出登录?</view>
			<view class="tui-alert-btn" :hover-stay-time="150">
				<view class="cancelBtn" @tap.stop="cancel">取消</view>
				<view class="sureBtn" @tap="sureLogout">确认</view> 
			</view>
		</common-alert>
	</view>
</template>

<script>
	import { upUserHead  } from '@/api/mine/index'
	import { mapGetters } from 'vuex';
	export default {
		data(){
			return{
				defHead:this.defHead,
				mainImg:'',
				showAlertFlag:false,
				maskClosable:true,
				sizeCache:0,
				realName:'',
				sexTxt:'',
				birthday:'',
				currVersion:''
			}
		},
		onLoad(options){
			var basicInfo = uni.getStorageSync('basicInfo');
			this.mainImg = basicInfo.userPortrait;
			this.realName = basicInfo.userName;
			this.sexTxt = uni.getStorageSync('userSex');
		},
		onUnload(){
			uni.removeStorageSync('basicInfo');
		},
		onShow(){
			const accountInfo = wx.getAccountInfoSync();
			this.currVersion = accountInfo.miniProgram.version;
		},
		onUnload(){
			uni.removeStorageSync('basicInfo');
		},
		methods:{
			onChooseAvatar(e){
				const { avatarUrl } = e.detail;
				this.upLoadFile(avatarUrl);
			},
			upLoadFile(avatarUrl){
				var field = {pathName:'user/head',relativePathTag:1},that = this;
				var url = this.serverUrl + '/cosFile/cosUpload';
				uni.showLoading({
					title: '正在上传...',
					icon: 'loading',
					mask: true
				})
				uni.uploadFile({
					url: url,
					filePath: avatarUrl,
					header:{
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token')
					},
					name: 'file', 
					formData:field,
					success:(res1)=>{
						uni.hideLoading();
						if(JSON.parse(res1.data).code == 200){
							var sucSrc = JSON.parse(res1.data).datas.filePath;
							this.mainImg = this.cloudUrl + sucSrc;
							this.upUserHead(sucSrc);
						}else if(JSON.parse(res1.data).code == 1000){
							uni.showToast({
								title : '服务器错误',
								icon : 'none'
							});
						}
					}
				})
			},
			upUserHead(sucSrc){
				var field = {headImg:sucSrc}
				let tmpSucSrc = this.cloudUrl + sucSrc;
				upUserHead(field).then(res=>{
					this.util.showToastSuc('设置成功'); 
					//更新即时通讯服务器上的头像
					let pages = getCurrentPages();
					let prevPage = pages[pages.length-2];
					prevPage.$vm.basicInfo.userPortrait = tmpSucSrc;
				}).catch(err=>{
					
				});
			},
			sureLogout(){
				this.util.showToastSuc('退出成功');
				this.User.clearStorage();
				this.showAlertFlag = false;
				let pages = getCurrentPages();
				let prevPage = pages[pages.length-2];
				prevPage.$vm.inviteUserAccount = '';
				this.$store.commit('user/SET_SYLOADNUM',1);
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500);
			},
			closeAlertComponent(){
				this.showAlertFlag = false;
			},
			cancel(){
				this.showAlertFlag = false;
			},
			logoOut(){
				this.showAlertFlag = true;
			}
		}
	}
</script>

<style lang='scss'>
	@import url("/static/css/common/alert.css");
	@import '@/static/scss/helpCen.scss';
	.imgBtn{
		width: 200rpx;
		position: absolute;
		left: -90rpx;
		top: 0;
		opacity: 0;
	}
	.comBtn{
		width: 600rpx;
		border-radius: 50rpx;
		margin: 100rpx auto 0;
		background: #fff;
		color: $pss-text-color8;
	}
	.samePar{
		width: 80rpx;
		height: 80rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
		border-radius: 50%;
	}
	page{
		background: $pss-bg-primary;
	}
</style>